<template>
    <div class="discount">
        <div class="title">
            <h2>{{typecontent.title}}</h2>
            <div class="much"><a href="#">更多</a> &nbsp;<span class="el-icon-caret-right"></span></div>
        </div>
        <ul class="discount-list">
            <li v-for="(item,index) in courseData" :key="index">
<!--                <router-link :to="{path:'/couseDetails',query:{id:item.courseId}}" >-->
                    <div><router-link :to="{path:'/courseDetails',query:{id:item.courseId}}" ><img :src="item.bannerFileUrl" alt="">  </router-link></div>
                    <p>{{item.courseTitle}}</p>
                    <p>共{{item.courseId}}节课 | {{item.participationsCount}}人报名</p>
                    <span v-if="item.isFree=='0'">&yen;{{item.discountPrice}}</span>
                    <span v-if="item.isFree=='0'">&yen;&nbsp;{{item.coursePrice}}</span>
                    <span v-else style="color:#00cf8c">免费</span>
                    <p v-if="item.isDiscount=='1'">{{item.discountDesc}}</p>
                    <!--                <p v-else>免费</p>-->
<!--                    </router-link>-->
            </li>
        </ul>
    </div>
</template>

<script>
    import {getCourse} from "../../../api";

    export default {
        name: "courseDiscount",
        data(){
            return{
                courseData:[],
            }
        },
        props:{
            typecontent: {
                type: Object,
            }
        },
        created() {

            getCourse(this.typecontent.type,this.typecontent.size).then(res=>{
                // console.log(res)
                this.courseData=res.rows
            })

        }
    }
</script>

<style scoped>
    .title {
        position: relative;
        margin: 30px auto!important;
        width: 1125px;
        padding: 0 12px 10px 62px!important;
        border-bottom: 2px solid #e8e8e8;
    }
    .much {
        position: absolute;
        top: 5px;
        right: 10px;
        color: #999;
    }
    .much>a {
        color: #999;
    }
    h2 {
        text-align: center;
    }
    .discount-list {
        overflow: hidden;
        width: 1200px;
        margin: auto!important;
    }
    .discount-list>li {
        float: left;
        padding: 8px!important;
        overflow: hidden;

    }
    .discount-list>li div {
        overflow: hidden;
        width: 224px;
        height: 135px;
    }
    .discount-list>li div>a>img {
        position: relative;
        width: 100%;
        height: 100%;
        transition: 1s;
    }
    .discount-list>li div>a>img:hover {
        transform: scale(1.2,1.2);
    }

    .discount-list>li>p:nth-of-type(1) {
        width: 200px;
        padding-top: 10px!important;
        font-weight: 500;
        color: #000;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .discount-list>li>p:nth-of-type(2) {
        color: #888;
        font-weight: 500;
    }
    .discount-list>li>span {
        color: #ff4500;
        font-size: 16px;
    }
    .discount-list>li>span:nth-of-type(2){
        color: #999;
        text-decoration: line-through;
        font-size: 12px;
    }
    .discount-list>li:hover {
        cursor: pointer;
    }
    .discount-list>li:hover>p:nth-of-type(1) {
        color: #00cf8c;

    }
    .discount-list>li>p:nth-of-type(3) {
        float: right;
        color: #fa8c16;
        background: #fff7e6;
        border-color: #ffd591;
        height: 22px;
        margin-right: 8px!important;
        padding: 0 7px;
        font-size: 12px;
        line-height: 20px;
        white-space: nowrap;
    }
</style>